<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> 
    <title>测试</title>
</head>
<body>
    <style id="demo2"></style>
    <div id="demo"></div>
    <div id="buttons">
        <button id="btnPause">暂停</button>
        <button id="btnPlay">播放</button>
        <button id="btnSlow">慢速</button>
        <button id="btnNormal">中速</button>
        <button id="btnFast">快速</button>

    </div>
    <style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 *::before, ::after {
    box-sizing: border-box;
  }

        #buttons {
            position: fixed;
            right: 0;
            top: 0;
            z-index: 12;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            margin-right: 10px;
        }
        #buttons>button{
            margin-bottom: 10px;
        }
         #demo2{
            display: none;
        }
        #demo{
            position: fixed;
            height: 30vh;
            top: 0;
            left: 0;
            width: 100%;
            overflow-y: auto;
        } 
        #demo::-webkit-scrollbar {
            display: none;
        }
        #html{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70vh;
        }
    </style>
    <div id="html">
        <div class="head"></div>
        <div class="face"></div>
        <div class="eye left">
            <div class="small left"></div>
        </div>
        <div class="eye right">
            <div class="small right"></div>
        </div>
        <div class="noes"></div>
        <!-- beard 是胡须 -->
        <div class="beard"> 
            <div class="beard left1"></div>
            <div class="beard left2"></div>
            <div class="beard left3"></div>
            <div class="beard down"></div>
            <div class="beard right1"></div>
            <div class="beard right2"></div>
            <div class="beard right3"></div>
        </div>
        <div class="mouth"></div>
        <div class="yuan">
            <div class="mouth1"></div>
            <div class="mouth2"></div>
        </div>
        <!-- rope是绳子 -->
        <div class="rope"></div>
        <div class="bell">
            <div class="line"></div>
        </div>
        <div class="body">
            <!-- belly 是肚子 -->
            <div class="belly"></div>
            <!-- sack 是口袋 -->
            <div class="sack"></div>
        </div>
        <div class="leg left"></div>
        <div class="leg right"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
        <div class="handy left"></div>
        <div class="handy right"></div>
        <div class="zhu">
            <div class="up"></div>
            <div class="middle"></div>
            <div class="down"></div>
        </div>
    </div>
    <script src="text.js"></script>

</body>
</html>